<!--  -->
<template>
  <div class="">
    <div>
      <el-row>
        <el-col :span="2">
          <label class="label_tag">专业:</label>
        </el-col>
        <el-col :span="14">
          <div
            class="magor-lable"
            v-for="(item, index) in gradedata"
            :key="index"
          >
            <a
              class="a_tag"
              :class="{ select: isselect == index }"
              @click="selectGrade(index)"
              >{{ item.name }}</a
            >
          </div>
        </el-col>
      </el-row>
      <!-- 
      <el-row>
        <el-col :span="1" :offset="5">
          <label class="label_tag">课程：</label>
        </el-col>
        <el-col :span="14">
          <div
            class="magor-lable"
            v-for="(item, index) in coursedata"
            :key="index"
          >
            <a
              class="a_tag"
              :class="{ select: iscourse == index }"
              @click="selectCourse(index)"
              >{{ item }}</a
            >
          </div>
        </el-col>
      </el-row> -->

      <el-row>
        <el-col :span="2">
          <label class="label_tag">班级:</label>
        </el-col>
        <el-col :span="14">
          <div
            class="magor-lable"
            v-for="(item, index) in gradedata[isselect].chrilder"
            :key="index"
          >
            <a
              class="a_tag"
              :class="{ select: isclass == index }"
              @click="selectClass(index)"
              >{{ item.name }}
            </a>
          </div>
        </el-col></el-row
      >
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      isselect: 0,
      isclass: 0,
      iscourse: 0,
      selectdata: {
        magor: "",
        course: "",
        class: "",
      },
      //专业数据
      gradedata: [
        {
          id: "211231",
          name: "软件工程",
          chrilder: [
            {
              id: "20205507",
              name: "1班",
            },
          ],
        },
        {
          id: "21123d1",
          name: "计科",
          chrilder: [
            {
              id: "20205501",
              name: "2班",
            },
            {
              id: "20205504",
              name: "1班",
            },
          ],
        },
        {
          id: "211231",
          name: "数媒",
          chrilder: [
            {
              id: "20205502",
              name: "6班",
            },
          ],
        },
      ],
      //专业数据
      coursedata: ["数据结构", "高数一", "高数二", "JAva面向对象"],
      //班级数据
      classdata: ["1班", "2班", "3班"],
    };
  },
  //监听属性 类似于data概念
  computed: {
    returnData() {},
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    //专业选择
    selectGrade(index) {
      this.isclass = 0;
      this.isselect = index;
      // this.selectdata.magor = this.gradedata[index];
      this.$emit(
        "itemclick",
        this.gradedata[this.isselect].chrilder[this.isclass]
      );
    },
    //课程
    selectCourse(index) {
      this.iscourse = index;

      // this.selectdata.course = this.coursedata[index];
      // console.log("课程********", this.selectdata.course);
    },
    //班级选择
    selectClass(index) {
      this.isclass = index;
      this.$emit(
        "itemclick",
        this.gradedata[this.isselect].chrilder[this.isclass]
      );
      // this.selectdata.class = this.classdata[index];
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.$emit(
        "itemclick",
        this.gradedata[this.isselect].chrilder[this.isclass]
      );
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.magor-lable {
  float: left;
}
.label_tag {
  font-weight: 600;
  line-height: 30px;
}
.a_tag {
  display: inline-block;
  margin: 0 9px 4px 0;
  text-decoration: none;
  font-size: 14px;
  padding: 5px 15px;
  color: #333;
}
.select {
  background: #edfaf8;
  color: #00bc9b;
}
</style>